<template>
  <view class="">
	  <!-- <button @click="getALiJsApiPay()">支付车费</button>
	  <button @click="getQrcodeCreate()">生成二维码</button>
	  <button @click="getQrCodeId(qrcodeId)">获取车场编号</button>
	   <button @click="getParkPrcie()">获取车辆费用</button> -->
	   <view class="form">
	       <view class="input-item">
	         <text>姓名</text>
	         <input type="text" v-model="name" placeholder="请输入姓名"/>
	       </view>
	       <view class="input-item">
	         <text>电话</text>
	         <input type="number" v-model="phone" placeholder="请输入电话"/>
	       </view>
	       <view class="input-item">
	         <text>原因</text>
	         <input type="text" v-model="reason" placeholder="请输入来访原因"/>
	       </view>
	       <button class="submit-btn" @click="submitForm">提交</button>
	     </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
		name: '',
		phone: '',
		reason: '',
        qrcodeId:"50",
		park:{
			parkId:"",
			parkName:"",
			secret:"",
			carNum:"浙t12345"
		}
      }
    },
    methods: {
		submitForm() {
		      const { name, phone, reason } = this
		      if (!name || !phone || !reason) {
		        uni.showToast({ title: '请填写完整信息', icon: 'none' })
		        return
		      }
		      // TODO: 处理表单提交逻辑
			  uni.showToast({
			  	  title: '来访添加成功',
			  	  icon: 'none', // 图标，可选值：none / success / loading
			  	  duration: 2000 // 显示时长，单位为毫秒
			  	});
		      console.log('表单已提交：', name, phone, reason)
		    },
		getQrCodeId(qrcodeId){
		  this.$modal.loading("查询中，请耐心等待...")
		  console.log(qrcodeId)
		  this.$store.dispatch('getQrCodeId',qrcodeId).then(res=>{
			  console.log(res.data)
			  this.park.parkId=res.data.parkId
			  this.park.parkName=res.data.parkName
			  this.park.secret=res.data.secret
			  this.$modal.closeLoading()
		  }).catch((err) => {
	            console.log("查询失败" + err);
	      });
	  },
	  getParkPrcie(){
		  this.$store.dispatch('getParkPrcie',this.park).then(res=>{
			  console.log(res)
		  }).catch((err) => {
	            console.log("查询失败" + err);
	      });
	  },
	  getALiJsApiPay(){
		  console.log("点击了")
		  this.$store.dispatch('getALiJsApiPay').then(res=>{
			  console.log(res.trade_no)
			  my.tradePay ({
			    // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
			    tradeNO: '201711152100110410533667792',
			    success: res => {
			      my.alert ({
			        content: JSON.stringify (res),
			      });
			    },
			    fail: error => {
			      console.error('调用 my.tradePay 失败: ', JSON.stringify(error).memo);
			    },
			  });
		  })
	  },
	  getQrcodeCreate(){
		  this.$store.dispatch('getQrcodeCreate').then(res=>{
			  console.log(res)
		  })
	  }
    }
  }
</script>

<style lang="scss">
 .form {
   padding: 20rpx;
 }
 
 .input-item {
   display: flex;
   align-items: center;
   margin-bottom: 20rpx;
 
   text {
     margin-right: 20rpx;
     width: 100rpx;
     text-align: right;
   }
 
   input {
     flex: 1;
     height: 60rpx;
     padding: 0 20rpx;
     border: 1rpx solid #ccc;
     border-radius: 10rpx;
   }
 }
 
 .submit-btn {
   display: block;
   margin: 0 auto;
   margin-top: 40rpx;
   width: 80%;
   height: 80rpx;
   line-height: 80rpx;
   text-align: center;
   background-color: #007aff;
   color: #fff;
   border-radius: 40rpx;
 }
</style>
